export default {

  data() {
    return {
      maphidden: 'transparent',
      mapSchoolData: [],
      mapData: {
        tjnf: '',
        jgid: '',
        jgmc: '',
        bxlxfz: '',
        bxlx: '',
        xzqhm: '',
        xzqhmc: '',
        lsjgid: '',
        jgdj: '',
        jd: '',
        wd : '',
        zxss: '',
        zrjs: '',
        jxjfzyfmj: '',
        sjjxjfzyfmj: '',
        tygmj: '',
        sjtygmj: '',
        jxyzds: '',
        mbmxxyyjxyzds: '',
        wldmtjs: '',
        sjwldmtjs: '',
        tssl: '',
        sjts: '',
        jssl: '',
        sjjssl: '',
        jxyqsbz: '',
        sjjxyqsbz: '',
        ddsj: '',
        etlsj: ''
      },
      // map: null,
      // myChart: null,
      geoJsonData: null,
      parentJson: null,
      schoolData: {
        name: '长沙市',
        schoolshow: true,
        value: []
      },
      schoolchart1: null,
      schoolchart2: null,
      mgpercent: 0,
      ygpercent: 0,
      schooloption: {
        color: this.colors,
        grid: {
          left: 60,
          top: '10%',
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          show: true,
          triggerEvent: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(148,170,212,1)'
            }
          },
          axisLabel: {
            show: true,
            fontSize: 16,
            interval: 0,
            formatter: function (value, index) {
              let text = value
              if (text.length > 4 && text.length <= 8) {
                text = `${text.slice(0, 4)}\n${text.slice(4)}`
              } else if (text.length > 8 && text.length <= 16) {
                text = `${text.slice(0, 4)}\n${text.slice(4, 8)}\n${text.slice(16)}`
              }
              return text
            },
            textStyle: {
              color: '#bad3ff'
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                'rgba(148,170,212,0.4)'
              ]
            }
          }
        },
        yAxis: [{
          type: 'log',
          min: 1,
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(148,170,212,1)'
            }
          },
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              fontSize: 16,
              color: '#bad3ff'
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                'rgba(148,170,212,0.4)'
              ]
            }
          }
        }],
        dataset: {
          source: []
        },
        series: []
      },
      effectcolor: '#ffe666',
      selectBarName: '普通初中',
      pointSimplifierIns: null
    }
  },

  computed: {

  },

  methods: {
    initSch () {
      let vm = this
      if (!vm.schoolchart1) {
        vm.schoolchart1 = window.echarts.init(vm.$refs.chartschool1)
        vm.schoolchart2 = window.echarts.init(vm.$refs.chartschool2)
      }

      vm.getXXSData()
      vm.getLXFXData()
      vm.initNewMap()
      // vm.getMapSchool().then(() => {
      //   // yhz modify 2020914
      //   // vm.searchCity(430100)
      //   vm.initNewMap()
      // }).catch(() => {
      //   // vm.searchCity(430100)
      //   vm.initNewMap()
      // })
    },
    getXXSData () {
      let vm = this

      let getwayurl = window.$twApp.gateway
      if (this.baseurls.length > 0 && this.baseurls[0].indexOf('http:') > -1) {
        getwayurl = this.baseurls[0]
      }
      let url = getwayurl + '/tw-cloud-datatheme-server/themedata/dp_xxgk_xxsl'
      let quary = { 'conditions': [{ fieldName: 'xzqhm', operator: 'IN', fieldValues: [vm.curAreaId], prepender: 'AND'}], 'fields': [], 'orderMethods': [] }
      let queryData = '2019'
      if (this.$twApp.yearId) {
        queryData = (this.$twApp.yearId - 1) + ''
      }
      // let conditions = { fieldName: 'xzqhm', operator: 'IN', fieldValues: [vm.curAreaId], prepender: 'AND'}
      let conditions = { fieldName: 'tjnf', operator: 'IN', fieldValues: [queryData], prepender: 'AND'}
      let orderMethods = { 'field': 'tjnf', 'method': 'ASC' }
      quary.orderMethods.push(orderMethods)
      quary.conditions.push(conditions)
      let data = []
      window.axios.post(url, quary).then(res => {
        if (res.data && res.data.pageInfo && res.data.pageInfo.list.length > 0) {
          let length = res.data.pageInfo.list.length
          res.data.pageInfo.list.forEach((item, index) => {
            if (index === length - 1) {
              data.push(['学校统计', '数量'])
              data.push(['幼儿园', item.yey_xxs])
              data.push(['小学', item.xx_xxs])
              data.push(['普通初中', item.ptcz_xxs])
              data.push(['普通高中', item.ptgz_xxs])
              data.push(['特殊教育学校', item.tsjy_xxs])
              data.push(['中等职业学校', item.zdzyxx_xxs])
              data.push(['工读学校', item.gdxx_xxs])
            }
          })
        }

        this.setXXSOption(data)
      }).catch(err => {
        console.error(err)
        this.setXXSOption(data)
      })
    },
    setXXSOption (indata) {
      let data = indata
      if (data.length === 0) {
        data = [
          ['学校统计', '数量'],
          ['幼儿园', 0],
          ['小学', 0],
          ['普通初中', 0],
          ['普通高中', 0],
          ['特殊教育学校', 0],
          ['中等职业学校', 0],
          ['工读学校', 0]
        ]
      }
      let length = data[0].length

      this.schooloption.series = []
      let a = this.schooloption.dataset
      a.source = data
      let colors = ['#1890ff', '#ffb686', '#ffe666', '#11c9aa', '#a694ff', '#fb6c84', '#91dcf2', '#00e2fe']
      for (let i = 0; i < length - 1; i++) {
        this.schooloption.series.push({
          type: 'bar',
          barMaxWidth: 28,
          label: {
            show: true,
            fontSize: 16,
            position: 'top',
            // formatter: (params) => this.formatNum(params.value)
          },
          itemStyle: {
            color: function (params) {
              return colors[params.dataIndex]
            }
          }
        })
      }
      this.schoolchart1.setOption(this.schooloption, true)
      this.schoolchart1.off('click')
      this.schoolchart1.on('click', this.clickBar)
    },
    clickBar (params) {
      this.inAnimation = true
      this.inAnimation1 = true
      this.inAnimation2 = true
      this.inAnimation3 = true
      let colors = ['#1890ff', '#ffb686', '#ffe666', '#11c9aa', '#a694ff', '#fb6c84', '#91dcf2', '#91dcf2']
      let data = ''
      if (params.componentType === 'series') {
        // this.effectcolor = params.color
        data = params.data[0]
      } else if (params.componentType === 'xAxis') {
        data = params.value
      }
      this.selectBarName = data
      switch(data) {
        case '幼儿园':
          this.effectcolor = colors[0]
          break
        case '小学':
          this.effectcolor = colors[1]
          break
        case '普通初中':
          this.effectcolor = colors[2]
          break
        case '普通高中':
          this.effectcolor = colors[3]
          break
        case '特殊教育学校':
          this.effectcolor = colors[4]
          break
        case '中等职业学校':
          this.effectcolor = colors[5]
          break
        case '工读学校':
          this.effectcolor = colors[6]
          break
        default:

      }
      if (this.curAreaId === 430100) {
        // this.getMapData(this.parentJson, this.curAreaId)
        this.setNewMapData()
      } else {
        // let Json = this.parentJson.filter(item => {
        //   if (item.properties.adcode === this.curAreaId) {
        //     return item
        //   }
        // })
        // this.getMapData(Json, this.curAreaId)
        this.setNewMapData()
      }
    },
    getLXFXData () {
      let op = {
        color: this.colors,
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: {
          type: 'sankey',
          layout: 'none',
          // left: '120px',
          // right: '120px',
          // top: '18%',
          // bottom: '18%',
          itemStyle: {
            borderWidth: 0
          },
          data: [],
          lineStyle: {
            color: 'source',
            opacity: 0.4
          },
          emphasis: {
            lineStyle: {
              opacity: 0.6
            }
          },
          links: [],
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#fff',
              fontSize: 16,
              formatter: function (params) {
                let text = params.name
                if (text.length > 6 && text.length <= 12) {
                  text = `${text.slice(0, 6)}\n${text.slice(6)}`
                }
                return text
                // return `${params.name}\n${params.value.toLocaleString()}`
              }
            }
          }
        }
      }
      this.datasource.forEach((p1) => {
        op.series.data.push({
          name: p1.name,
          value: p1.value,
          itemStyle: {
            opacity: 0.8
          }
        })
      })
      this.datalink.forEach((p1) => {
        op.series.links.push(p1)
      })
      this.schoolchart2.setOption(op, true)
    },
    async getMapSchool () {
      let vm = this
      let queryData = '2019'
      if (this.$twApp.yearId) {
        queryData = (this.$twApp.yearId - 1) + ''
      }
      let getwayurl = window.$twApp.gateway
      if (this.baseurls.length > 0 && this.baseurls[0].indexOf('http:') > -1) {
        getwayurl = this.baseurls[0]
      }
      let url = getwayurl + '/tw-cloud-datatheme-server/themedata/dp_xxgk_bxtj'
      let quary = {
        'conditions': [],
        'fields': [],
        'orderMethods': [],
        "pagination": {
            "numPerPage": 5000,
            "startNum": 1,
            "pageNo":1
          }
        }
      let condition = { 'fieldName': 'tjnf', 'fieldValues': [queryData], 'operator': 'IN', 'prepender': 'AND' }
      quary.conditions.push(condition)
      let orderMethods = { 'field': 'tjnf', 'method': 'ASC' }
      quary.orderMethods.push(orderMethods)

      vm.mapSchoolData = []
      await window.axios.post(url, quary).then(res => {
        if (res.data && res.data.pageInfo && res.data.pageInfo.list.length > 0) {
          let resdata = []
          res.data.pageInfo.list.forEach((item, index) => {
            if (item.jd && item.wd && item.jd >0 && item.wd >0) {
              let mapdata = {
                ...item
              }

              if (!vm.mapData.jd) {
                vm.mapData = mapdata
                vm.schoolData.name = item.jgmc
                vm.$emit('input', this.mapData.jgid)
                vm.$emit('change', this.mapData.jgid)
              }

              let a = {
                name: item.jgmc,
                bxlxfz: item.bxlxfz,
                xzqhm: item.xzqhm,
                mapdata: mapdata,
                value: [item.jd, item.wd]
              }
              resdata.push(a)
            }
          })
          vm.mapSchoolData = resdata
        }
      }).catch(err => {
        console.error(err)
      })
    },

    // getMapData (Json, areaid = 430100) {
    //   let barpartern = this.selectBarName
    //   // 这里我们模拟数据进行数据获取
    //   // 实际项目中会调接口把坐标和值返回来
    //   // 必须将数据写成数组对象格式,name,value是必须参数，后面的根据自己实际情况自定义添加
    //   // 除了name和value,其他的名字可以随便取
    //   // 分布图不需要坐标就可以实现，只需要名字和地图行政区的名字对应上了就行
    //   // let mmmData = []
    //   let mapData = Json.map(item => {
    //     return ({
    //       name: item.properties.name,
    //       value: Math.random() * 1000,
    //       level: item.properties.level,
    //       cityCode: item.properties.adcode
    //     })
    //   })
    //   let mapJson = {}
    //   // geoJson必须这种格式
    //   mapJson.features = Json
    //   let effData = []
    //   if (areaid === 430100) {
    //     effData = this.mapSchoolData.filter(itm => itm.bxlxfz === barpartern)
    //   } else {
    //     effData = this.mapSchoolData.filter(itm => itm.bxlxfz === barpartern && parseInt(itm.xzqhm) === areaid)
    //   }

    //   if (effData && effData.length > 0 && effData[0].mapdata) {
    //     this.mapData = effData[0].mapdata
    //     this.schoolData.name = this.mapData.jgmc
    //     this.$emit('input', this.mapData.jgid)
    //     this.$emit('change', this.mapData.jgid)
    //   }

    //   // this.mmmData.filter(itm => itm.name === this.curAreaId)[0].value
    //   // console.time('XXX')
    //   this.initEchartsMap(mapData, effData, mapJson)
    //   // console.timeEnd('XXX')
    // },
    // initEchartsMap (mapData, effData, mapJson) {
    //   let vm = this
    //   this.myChart = window.echarts.init(this.$refs.scatterMap)
    //   // 注册地图,前面名字自定义,后面是高德获取的geoJson
    //   window.echarts.registerMap('Map', mapJson)
    //   // 这里要加true表示重新绘制,不然下钻或筛选后,地图会飞出去
    //   this.myChart.setOption({
    //     backgroundColor: '#031532',
    //     tooltip: {
    //       trigger: "item",
    //       backgroundColor: 'rgba(50,50,50,0.3)',
    //       formatter: p => {
    //         // console.log('ppp', p)
    //         let val = p.value[3];
    //         if (window.isNaN(val)) {
    //           val = 0
    //         }
    //         // let txtCon = "<div style='text-align:center'>" + p.name + ":<br />数据：" + val + '</div>'
    //         let txtCon = "<div style='text-align:center;'>" + p.name + '</div>'
    //         return txtCon
    //       }
    //     },
    //     geo: {
    //       map: 'Map',
    //       roam: true,
    //       zoom: 1.1,
    //       // left: '150',
    //       itemStyle: { //地图区域的多边形 图形样式
    //         // color: 'rgba(209,250,12,0.5)',
    //         normal: { //是图形在默认状态下的样式
    //           color: '#0331aa', // 'rgba(37,124,169)',
    //           label: {
    //             show: true, //是否显示标签
    //             textStyle: {
    //               color: '#fff' // 'rgb(249, 249, 249)'
    //             },
    //           },

    //           borderWidth: 1,
    //           borderColor: '#88d2ff', // 'rgba(37,124,169)',
    //           // areaColor: 'rgba(37,124,169)',
    //           shadowColor: '#657df5', // 'rgba(37,124,169)',
    //           // shadowOffsetY: 15,
    //           // shadowOffsetX: 8,
    //           shadowBlur: 3,
    //         },
    //       },
    //       label: {
    //         show: true,
    //         textStyle: {
    //           color: '#fff', // "rgb(249, 249, 249)", //省份标签字体颜色
    //           fontSize: 16
    //         }
    //       },
    //       emphasis: {
    //         itemStyle: {
    //           color: '#7e73ff' // '#1890ff'
    //         },
    //         label: {
    //           show: true,
    //           color: '#fff'
    //         }
    //       }
    //     },
    //     series: [
    //       {
    //         name: '散点',
    //         // roam: true,
    //         zoom: 1.1,
    //         type: 'effectScatter',
    //         coordinateSystem: 'geo',
    //         data: effData,
    //         animation: false,
    //         showEffectOn: 'emphasis',
    //         effectType: '',
    //         // showEffectOn: 'render',
    //         // rippleEffect: {
    //         //   brushType: 'stroke'
    //         // },
    //         hoverAnimation: false,
    //         zlevel: 1,
    //         symbolSize: function(val) {
    //           return 3;
    //         },
    //         label: {
    //           normal: {
    //             formatter: '{b}',
    //             position: 'right',
    //             show: false
    //           },
    //           emphasis: {
    //             show: false
    //           }
    //         },
    //         itemStyle: {
    //           normal: {
    //             color: vm.effectcolor ? vm.effectcolor : '#ffea92'
    //           }
    //         }
    //     },
    //       {
    //       name: "地图",
    //       type: "map",
    //       // coordinateSystem: 'geo',
    //       // mapType: 'Map',
    //       map: "Map",
    //       geoIndex: 0,
    //       roam: true, //是否可缩放
    //       zoom: 1.1, //缩放比例
    //       data: mapData,
    //       itemStyle: {
    //         normal: {
    //           show: true,
    //           areaColor: 'rgba(0,0,0,0)',
    //           borderColor: 'rgb(185, 220, 227)',
    //           borderWidth: '1',
    //         },
    //       },
    //       label: {
    //         normal: {
    //           show: true, //显示省份标签
    //           textStyle: {
    //             color: '#fff', // "rgb(249, 249, 249)", //省份标签字体颜色
    //             fontSize: 16
    //           }
    //         },
    //         emphasis: {
    //           // 对应的鼠标悬浮效果
    //           show: true,
    //           textStyle: {
    //             color: "#000"
    //           }
    //         }
    //       }
    //     }
    //     ]
    //   }, true)
    //   this.maphidden = 'transparent'
    //   // console.log('mapData', JSON.stringify(mapData))
    //   // 点击前解绑，防止点击事件触发多次
    //   this.myChart.off('click')
    //   this.myChart.on('click', this.clickMap)
    // },
    // 这里有个参数，就是点击的那个地块的数据信息
    // clickMap (params) {
    //   this.inAnimation = true
    //   this.inAnimation1 = true
    //   this.inAnimation2 = true
    //   this.inAnimation3 = true
    //   if (params.componentSubType === 'map') { // 选中区域
    //     let data = params.data
    //     // this.schoolData.name = '' + data.name + ''
    //     // this.schoolData.schoolshow = false
    //     if (this.curAreaId !== data.cityCode) {
    //       this.curAreaId = data.cityCode
    //       let Json = this.parentJson.filter(item => {
    //         if (item.properties.adcode === data.cityCode) {
    //           return item
    //         }
    //       })
    //       this.getMapData(Json, this.curAreaId)
    //     }
    //   } else { // 选中学校
    //     this.getSchoolData(params)
    //   }
    // },
    // backtop () {
    //   this.curAreaId = 430100
    //   this.inAnimation = true
    //   this.inAnimation1 = true
    //   this.inAnimation2 = true
    //   this.inAnimation3 = true
    //   // this.schoolData.name = '长沙市'
    //   // this.schoolData.schoolshow = false
    //   this.getMapData(this.parentJson)
    // },
    getSchoolData (params) {
      this.mapData = params.mapdata
      this.schoolData.name = params.name
      this.schoolData.schoolshow = true
      this.$emit('input', this.mapData.jgid)
      this.$emit('change', this.mapData.jgid)
      // this.getVideoList(this.mapData.jgid)
    },
  },

  mounted () {

  },

  beforeDestroy () {
    if (this.schoolchart1) {
      this.schoolchart1.dispose()
      this.schoolchart1 = null
      this.schoolchart2.dispose()
      this.schoolchart2 = null
    }
  },

  watch: {

  }
}
